<template>
    <div class="search-container">
        <div ref="searchBox" class="search-box">
            <van-search
                ref="searchComp"
                background="transparent"
                placeholder="搜索"
                left-icon="arrow-left"
                @click-left-icon="handleBack"
                @search="handleSearch"
                v-model="search"
                :clearable="false"
            >
                <template #right-icon>
                    <div class="search-right-box">
                        <div class="fame">
                            <van-icon class="clear" v-show="!searching && search" name="clear" @click="handleClearSearch"/>
                            <van-loading v-show="searching" />
                        </div>
                        <span>搜索</span>
                    </div>
                </template>
            </van-search>
            <template v-if="resultList.length <= 0">
                <div class="favar">
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-food"></i>
                        </div>
                        <span>美食</span>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-hotel"></i>
                        </div>
                        <span>酒店</span>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-jingdian"></i>
                        </div>
                        <span>景点</span>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-oil"></i>
                        </div>
                        <span>加油站</span>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-fill-new-drink-cold-drink"></i>
                        </div>
                        <span>休闲玩乐</span>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="iconfont icon-gengduo"></i>
                        </div>
                        <span>更多</span>
                    </div>
                </div>
                <div class="history">
                    <div class="habit">
                        <div class="item">
                            <i class="iconfont icon-home"></i>
                            <span>家</span>
                        </div>
                        <div class="item">
                            <i class="iconfont icon-work"></i>
                            <span>公司</span>
                        </div>
                        <div class="item">
                            <i class="iconfont icon-star-o"></i>
                            <span>收藏夹</span>
                        </div>
                        <div class="item">
                            <i class="iconfont icon-hot"></i>
                            <span>热榜</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="list-item" v-for="(item, index) in historyList" :key="index"></div>
                    </div>
                </div>
            </template>
            <div v-else class="resList">
                <div class="list-item" v-for="(item, index) in resultList" :key="index" @click="handleSelectPoint(item)">
                    <div class="name">{{ item.name }}</div>
                    <div class="subtit">{{ item.address }}</div>
                </div>
                <div class="list-item more">
                    查看更多搜索结果
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch, inject } from 'vue';
import { useRouter } from 'vue-router';
import { debounce } from '@/utils/index';
import { mapEventBusKey } from '@/iDent';
const $router = useRouter();
const searchBox = ref();
const searchComp = ref();
const search = ref('');
const searching = ref(false);
const resultList = ref([]);
const historyList = ref([]);
// 地图事件总线
const mapRef = inject(mapEventBusKey);
const { handlePolSel: mapHandlePolSel, polSearch } = mapRef.value;

const handleBack = () => {
    $router.go(-1);
}
watch(search, (val, o) => {
    if(val) {
        handleSearch(val);
    } else if(o && !val) {
        // 清空当前搜索结果
        resultList.value = [];
    }
})
const handleClearSearch = () => {
    search.value = ''
}
const handleSearch = debounce((val:string) => {
    searching.value = true;
    polSearch(val, (status, res) => {
        searching.value = false;
        if(status === 'complete') {
            resultList.value = res.poiList.pois;
        } else if(status === 'no_data') {
            resultList.value = [];
        }
    });
});
const handleSelectPoint = (point) => {
    const { location } = point;
    mapHandlePolSel(16, [location.lng, location.lat], false, 200);

    $router.push('/location/' + point.id);
}
onMounted(() => {
    setTimeout(() => {
        searchBox.value.style.transform = 'translateY(0px)';
        searchComp.value.focus();
    }, 0);
})
</script>
<style scoped lang="scss">
.search-container {
    height: 100%;
    background-color: rgba(255, 255, 255, 0.00);
    .search-box {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        padding: 0px 20px 20px;
        box-sizing: border-box;
        background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.56) 10px, #f2f2f2 100px, #f2f2f2);
        transform: translateY(90%);
        transition: transform 0.1s ease;
        .search-right-box {
            display: flex;
            align-items: center;
            span {
                color: #077ce9;
                margin-left: 20px;
            }
        }
    }
    .history {
        width: 100%;
        margin: 10px auto 10px;
        border-radius: 10px;
        background: #fff;
        padding: 18px 10px 10px;
        box-sizing: border-box;
        .habit {
            padding: 10px;
            display: flex;
            .item {
                flex: 1;
                flex-shrink: 0;
                color: #2c2c2c;
                font-size: 12px;
                border-right: 1px solid #eee;
                display: flex;
                justify-content: center;
                &:last-child {
                    border-right: none
                }
                i {
                    font-size: 18px;
                    &.icon-hot {
                        color: rgb(255, 38, 0);
                    }
                }
                span {
                    margin-left: 16px;
                }
            }
        }
    }
    .resList {
        background: #fff;
        padding: 0px 20px;
        border-radius: 12px;
        .list-item {
            padding: 10px 10px;
            font-size: 28px;
            color: #333;
            border-top: 1px solid #eee;
            &:first-child {
                border-top: none;
            }
            .subtit {
                font-size: 12px;
                color: #666;
            }
            &.more {
                text-align: center;
                padding: 18px 10px;
                font-size: 14px;
                color: #666;
            }
        }
    }
    .favar {
        width: 100%;
        margin: 10px auto 10px;
        border-radius: 10px;
        background: #fff;
        padding: 18px 10px 10px;
        box-sizing: border-box;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #333;
            .icon {
                width: 44px;
                height: 44px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 14px;
                color: #fff;
                margin-bottom: 5px;
                i {
                    font-size: 30px;
                    &.icon-hotel {
                        font-size: 24px;
                    }
                }
            }
            span {
                font-size: 12px;
                transform: scale(0.9)
            }
            &:first-child .icon{
                background-color: orange;
            }
            &:nth-child(2) .icon{
                background-color: #4994da
            }
            &:nth-child(3) .icon{
                background: lightgreen;
            }
            &:nth-child(4) .icon{
                background: #077ce9;
            }
            &:nth-child(5) .icon{
                background-color: rgb(151, 2, 151);
            }
            &:last-child .icon{
                background: #777;
            }
        }
    }
}
</style>